<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>水果销售管理系统</title>
    <link rel='stylesheet' type='text/css' href='css/main.css'>
    <!-- 引入js -->
    <script type="text/javascript" src="js/jquery.js"></script>
    <!-- 引入相关的js文件 -->
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <script type="text/javascript" src="js/china.js"></script>
    <script type="text/javascript" src="js/echarts-wordcloud.js"></script>
</head>

<body>
    <!--头部设计-->
    <header class="flex-layout">
        <div class="market h1_time">
            卖场名称：
            <select id="marketName" onchange="market_update(this.value)">
            </select>
            <script type="text/javascript" src="js/taskjs/marketdata.js"></script>
        </div>
        <h1 class="h1_time" id="title">水果销售管理系统</h1>
        <div class="showTime h1_time"></div>
        <script type="text/javascript" src="js/taskjs/time.js"></script>
    </header>
    <!--页面主体部分-->
    <section class="mainbox flex-layout">
        <!--左侧-->
        <div class="column">
            <div class="panel leftUp">
                <h2>水果商品销量</h2>
                <div class="domz">
                    <div class="chart1"></div>
                    <div class="chart2"></div>
                </div>
                <div class="panel-footer"></div>
            </div>
            <div class="panel leftMid">
                <h2>水果所属科目</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>
            <div class="panel leftDown">
                <h2>卖场销售预算</h2>
                <div class="domz">
                    <div class="chart1 boxplot1"></div>
                    <div class="chart2"></div>
                </div>
                <div class="panel-footer"></div>
            </div>
        </div>

        <div class="column column2">
            <!-- 表示同时使用column和column2这两个类样式 -->
            <!--no模块-->
            <div class="no">
                <div class="no-hd">
                    <ul class="no-ul">
                        <li id="no-rishang"></li>
                        <li id="no-TC"></li>
                        <li id="no-AC"></li>
                        <li id="no-sale"></li>
                    </ul>
                </div>
                <div class="no-bd">
                    <ul>
                        <li id="rishang"></li>
                        <li id="TC"></li>
                        <li id="AC"></li>
                        <li id="sale"></li>
                    </ul>
                </div>
            </div>
            <!--地图模块-->
            <div class="map">
                <a href="javascript:;" class="mapA">销量</a>
                <a href="javascript:;" class="mapA">门店平均销量</a>
                <div class="chart"></div>
            </div>
        </div>
        <!--右侧-->
        <div class="column">
            <div class="panel rightUp">
                <h2>水果科目销量</h2>
                <div class="domz">
                    <div class="chart1"></div>
                    <div class="chart2"></div>
                </div>
                <div class="panel-footer"></div>
            </div>
            <div class="panel rightMid">
                <h2 id="gauge"></h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>
            <div class="panel rightDown">
                <h2>每月增加会员人数</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>
        </div>
    </section>

    <!-- echarts图js代码 -->
    <script>
        document.write("<scr" + "ipt src='js/taskjs/01leftup1.js'></scr" + "ipt>");
        document.write("<scr" + "ipt src='js/taskjs/01leftup2.js'></scr" + "ipt>");
        document.write("<scr" + "ipt src='js/taskjs/02leftmid.js'></scr" + "ipt>");
        document.write("<scr" + "ipt src='js/taskjs/03leftdown1.js'></scr" + "ipt>");
        document.write("<scr" + "ipt src='js/taskjs/03leftdown2.js'></scr" + "ipt>");
        document.write("<scr" + "ipt src='js/taskjs/04midup.js'></scr" + "ipt>");
        document.write("<scr" + "ipt src='js/taskjs/05middown.js'></scr" + "ipt>");
        document.write("<scr" + "ipt src='js/taskjs/06rightup1.js'></scr" + "ipt>");
        document.write("<scr" + "ipt src='js/taskjs/06rightup2.js'></scr" + "ipt>");
        document.write("<scr" + "ipt src='js/taskjs/07rightmid.js'></scr" + "ipt>");
        document.write("<scr" + "ipt src='js/taskjs/08rightdown.js'></scr" + "ipt>");

        // 当下拉框发生变化时，调用函数，传入卖场名称，更新数据
        function market_update(market_name) {
            // 当下拉框改变数据时更换图表的数据
            market1a(market_name);
            market1b(market_name);
            market2(market_name);
            market3a(market_name);
            market3b(market_name);
            market4(market_name);
            market5(market_name);
            market6a(market_name);
            market6b(market_name);
            market7(market_name);
            market8(market_name);
        }
    </script>
</body>

</html>